<template>
  <div>
    <el-dialog
      title="任务填报内容"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="50%"
      v-dialog-drag
      :close-on-click-modal="false"
      top="3vh"
      class="report-text-form"
      @close="handleClose()"
      @open="handleOpen()"
    >
      <!-- <el-descriptions>
          <el-descriptions-item :label="taskDetail.execDate">{{taskDetail.execName}}{{taskRecordsMap[taskDetail.execType]}}</el-descriptions-item>
      </el-descriptions> -->
      <div class='sub'>
        <span class='left'>{{taskDetail.execDate}}</span>
        <span>{{taskDetail.execName}}</span>
        <span>{{taskRecordsMap[taskDetail.execType]}}</span>
        <el-divider></el-divider>
      </div>

      <el-form :model="taskDetail" ref="ruleForm" label-width="100px">
        <el-form-item label="任务名称">
          <div class="text-value">{{taskDetail.taskName}}</div>
        </el-form-item>

        <el-form-item label="任务内容" style="width: 100%;">
          <div class="text-value">{{taskDetail.taskDes}}</div>
        </el-form-item>

        <el-form-item label="任务阶段">
          <div class="text-value">{{taskRecordsMap[taskDetail.execType]}}</div>
        </el-form-item>

        <el-form-item label="参与人">
          <div class="text-value">{{taskDetail.partInUserName}}</div>
        </el-form-item>

        <el-form-item label="执行结果">
          <div class="text-value">{{taskDetail.execDes}}</div>
        </el-form-item>

        <el-form-item label="附件">
          <template v-if='taskDetail.files && taskDetail.files.length'>
            <div class="text-value" v-for="item in taskDetail.files" :key='item.id'>
              <el-link type="primary" :underline="false" @click="preview(item)">{{item.fileName}}</el-link>
            </div>
          </template>
          <div v-else>-</div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import { getToken } from '@/utils/auth'
  import service from "../../../utils/request";
  import { GEN_SERVER } from '@/config/baseUrl'
  import { downloadFile } from '@/utils/file'
  import { parseTime } from '@/utils/eam'
  import {taskRecordsMap} from "../enum";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: ()=>{}
    },
    mode: {
      type: String,
      default: "report"
    }
  },
  data() {
    return {
      taskDetail:{},
      saveloading: false,
      taskRecordsMap
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleClose() {
      this.saveloading = false;
      this.taskDetail = {}
    },

    handleOpen() {
      this.taskDetail = Object.assign({},this.row)
    },

    preview(item){
      axios({
        baseURL:service.baseURL + GEN_SERVER['form-server'],
        url:'/refine/report/byte/down',
        method:"get",
        params:{id:item.id},
        headers: {Authorization:'Bearer ' + getToken()},
        responseType: 'blob'
      }).then(res => {
        let count = item.fileName.lastIndexOf(".");
        let fileName = item.fileName.slice(0,count);
        let suffix = item.fileName.slice(count);
        downloadFile(res.data,`${fileName}${parseTime(new Date(), '{y}{m}{d}')}${suffix}`)
        this.saveloading = false
      }).catch(() => {
        this.msgError("操作失败")
        this.saveloading = false
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  // display: flex;
  // justify-content: space-between;
  // flex-flow: wrap;
  // .el-form-item {
  //   width: 49%;
  // }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.el-timeline {
  margin: 0 160px;
  ::v-deep .el-timeline-item__content{
    position:relative;
    font-size: 0.9rem;
  }
}

.time {
  position: absolute;
  left: -180px;
  top:2px;
  color:#666
}
.record-status{
  display: flex;
  align-items: center;
  .look{
    margin-left: 10px;
  }
}
.handler{
  color:#606266;
  margin: 6px 0;
}
.processedName{
  color:#999
}
.execDes{
  color:#999
}
.text-value{
  font-size: 0.875rem;
  line-height:2.25rem;
  color:#666
}
.report-text-form{
  ::v-deep .el-dialog .el-dialog__body{
    max-height: calc(100vh - 16rem);
  };
  .sub{
    font-size:16px;
    ::v-deep .el-divider--horizontal{
      margin: 1rem 0;
    }
    .left{
      margin-left:24px;
      margin-right:20px;
    }
  }
  ::v-deep .el-divider--horizontal{
    margin: 1rem 0;
  }
}
</style>
